<template>
  <div class="home">
    <div ref="editor"></div>
  </div>
</template>

<script>
import wangEditor from "wangeditor";
export default {
  model: {
    prop: "detail",
  },
  props: {
    // 父组件传递过来的值
    detail: String,
  },
  data() {
    return {
      editor: null,
      editorData: "",
    };
  },
  mounted() {
    this.creatEditor();
  },
  methods: {
    creatEditor() {
      let that = this;
      const editor = new wangEditor(this.$refs.editor);
      // 配置 onchange 回调函数，将数据同步到 vue 中
      editor.config.onchange = (newHtml) => {
        this.editorData = newHtml;
        // let text = editor.txt.text();
        this.$emit("input", this.editorData);
        // this.$emit("textChange", text);
      };
      // 自定义上传图片
      editor.config.customUploadImg = function (files, insert) {
        let formData = new FormData();
        for (let i = 0; i < files.length; i++) {
          formData.append("file", files[i]);
        }
        that.$http
          .post("/file/upload", formData)
          .then((res) => {
            if (res.data.code == 0) {
              for (let j = 0; j < res.data.data.length; j++) {
                insert(res.data.data[j].location);
              }
            } else {
              that.$message.error(res.data.msg);
            }
          })
          .catch((err) => {
            console.log(err.message);
          });
      };
      editor.config.uploadVideoAccept = [
        "avi",
        "wmv",
        "mkv",
        "mp4",
        "mov",
        "rm",
      ];
      // 自定义上传视频
      editor.config.customUploadVideo = function (files, insert) {
        let formData = new FormData();
        for (let i = 0; i < files.length; i++) {
          //获取文件大小
          let size = files[i].size; //单位：字节(byte)
          if (size / 1024 / 1024 > 10) {
            return that.$message.warning("上传视频不能大于10M");
          }
          formData.append("file", files[i]);
        }
        that.$http
          .post("/file/upload", formData)
          .then((res) => {
            if (res.data.code == 0) {
              for (let j = 0; j < res.data.data.length; j++) {
                insert(res.data.data[j].location);
              }
            } else {
              that.$message.error(res.data.msg);
            }
          })
          .catch((err) => {
            console.log(err.message);
          });
      };
      // 配置层级;
      // editor.config.zIndex = 2;
      // 取消自动 focus
      editor.config.focus = false;
      // 创建编辑器
      editor.create();
      this.editor = editor;
    },
  },
  watch: {
    detail: {
      handler: function (val) {
        if (val !== this.editor.txt.html()) {
          this.editor.txt.html(val);
        }
      },
    },
  },
  beforeDestroy() {
    // 调用销毁 API 对当前编辑器实例进行销毁
    this.editor.destroy();
    this.editor = null;
  },
};
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  margin: auto;
  position: relative;
  ::v-deep .w-e-toolbar {
    z-index: 2 !important;
  }
  ::v-deep.w-e-text-container {
    z-index: 1 !important;
  }
  .btn {
    position: absolute;
    right: 0;
    top: 0;
    padding: 5px 10px;
    cursor: pointer;
  }
  h3 {
    margin: 30px 0 15px;
  }
}
</style>